<template>
   
    <div id="container">
        <div id="title">
            <h1>电商后台管理系统</h1>
        </div>
        <div class="input">
            <el-input v-model="name" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </div>
        <div class="input">
            <el-input v-model="password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
        </div>
        <div class="input">
            <el-button @click="loginV2" style="width:200px" type="primary" :disabled="disabled">登录</el-button>
            <el-button @click="register" style="width:200px" type="primary" >注册</el-button>
        </div>
    </div>
</template>
    
<script>
import Storage from '../../tools/Storage'
import {ElMessage} from 'element-plus'
import axios from 'axios'


export default{
    name:"Login",
    data(){
        return {
            name:"",
            password:""
        }
    },
    computed:{
        disabled(){
            return this.name.length==0 || this.password.length==0;
        }
    },
    methods:{
        login(){
            Storage.commit("registerUserInfo",{
                name:this.name,
                password:this.password
            });
            ElMessage({
                message:'登录成功',
                type:'success',
                duration:3000
            });
           
            setTimeout(()=>{
                console.log("setTimeout");
                this.$router.push({name:"home"})
            }, 2000);
        },
        loginV2(){
          
            let loginForm={
                "aname":this.name,
                "apwd":this.password
            };
            
            let formData=JSON.stringify(loginForm);
            let config = {
                headers:{'Content-Type':'application/json; charset=UTF-8'}
            };

            let baseURL='http://localhost:8888';
            let datetime=new Date();

            axios.post(baseURL+'/user/login', formData, config) //直接提交表单
            .then(successResponse => {
                if (successResponse.data === "ok") {
                    Storage.commit("registerUserInfo",{
                        name:this.name,
                        password:this.password
                    });
                    ElMessage({
                        message:datetime+', 登录成功',
                        type:'success',
                        duration:3000
                    });
                    
                    setTimeout(()=>{
                        console.log("setTimeout");
                        this.$router.push({name:"home"});
                        console.log("after push!")
                    },2000);       
                }else {
                    ElMessage({
                        message:datetime+', 用户名或密码错误！',
                        type:'error',
                        duration:3000
                    });
                    this.isDisable = false
                }
            })
            .catch(failResponse => {
                ElMessage({
                        message:datetime+', 响应异常',
                        type:'error',
                        duration:3000
                });
            })
        },
        register(){
            console.log("register");
            Storage.commit("registerUserInfo",{
                name:this.name,
                password:this.password
            });
            ElMessage({
                message:'正在跳转',
                type:'info',
                duration:2000
            });
           
            setTimeout(()=>{
                console.log("setTimeout");
                this.$router.push({name:"register"})
                console.log("after push register")
            }, 2000);
        }
    }
}
</script>

<style>
#container {
    background: #595959;
    background-image: url("~@/assets/login_bg.jpg");
    height: 100%;
    width: 100%;
    position: absolute;
}

#title {
    text-align: center;
    color: azure;
    margin-top: 200px;
}

.input {
    margin: 20px auto;
    width: 500px;
}

</style>
